class Obsever {
    constructor(data) {
        this.walk(data)
    }
    // 给data 对象上所有的属性 设置 getter 和 setter ， 变成相应式数据
    walk(data) {
        if (data && typeof data === 'object') {
            Object.keys(data).forEach(key => {
                this.defineReactive(data, key, data[key])
            })
        }
    }
    // 为属性加上 getter和 setter
    defineReactive(data, key, val) {
        // 如果当前定义的属性时一个对象，将会给这个对象上的所有属性也设置成响应式的数据
        this.walk(data[key]);
        const that = this;
        // 为每一个响应式的属性都 设置一个 dep 对象来负责 在 getter 中收集 观察者，在setter 中发布更新通知
        const dep = new Dep();
        Object.defineProperty(data, key, {
            configurable: true,
            enumerable: true,
            get() {
                // 
                Dep.target && dep.addSub(Dep.target)
                return val;
            },
            set(newVal) {
                if (newVal === val) {
                    return
                }
                val = newVal;
                //为新的属性值设置成响应式。
                that.walk(newVal);
                dep.notify();
            }
        })
    }
}